<template>
  <div>
    我是APP组件
    <p id="msgP">这是msg的值:{{ msg }}</p>
    <p id="cuteP">我是赖酱</p>
    <button @click="msg = '赖酱是我'">点我改msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "赖酱",
    };
  },
  // 钩子函数定义在组件对象的根节点,和data/methods等 同级
  // 最常用的:created(发送ajax请求)/mounted(操作真实DOM,第三方插件Echarts)
  beforeCreate() {
    console.log("beforeCreate", this.msg);
    // undefined,无法访问data中的数据
  },
  created() {
    console.log("created", this.msg);
    // 可以访问data中的数据
  },

  // 挂载阶段
  beforeMount() {
    let p = document.querySelector("#cuteP");
    console.log("beforeMount", p);
  },
  mounted() {
    let p = document.querySelector("#cuteP");
    console.log("mounted", p);
  },

  // 当数据变化时会触发
  // 更新阶段
  beforeUpdate() {
    let msgP=document.querySelector("#msgP")
    console.log("beforeUpdate", this.msg, msgP.innerHTML);
  },
  updated() {
    let msgP=document.querySelector("#msgP")
    console.log("updated", this.msg, msgP.innerHTML);
  },

  // 销毁阶段
  beforeDestroy(){
    console.log("beforeDestroy");
  },
  destroyed(){
    console.log("destroyed");
  }
};
</script>

<style>
</style>
